<template>
  <div>
    <el-form-item v-for="item in list"
                  :key="item.prop + item.type"
                  :label="item.label">
      <el-input v-if="item.type == 'input'"
                v-model="item.value"
                @change="handleChange($event, item)"></el-input>
      <el-switch v-if="item.type == 'switch'"
                 v-model="item.value"
                 @change="handleChange($event, item)"></el-switch>
      <el-select v-if="item.type == 'select'"
                 v-model="item.value"
                 @change="handleChange($event, item)">
        <el-option v-for="(itemIn, idx) in item.options"
                   :key="'select' + idx"
                   :label="itemIn.name"
                   :value="itemIn.value">
        </el-option>
      </el-select>
      <el-select v-if="item.type == 'multiSelect'"
                 v-model="item.value"
                 multiple
                 filterable
                 allow-create
                 default-first-option
                 @change="handleChange($event, item)">
        <el-option v-for="(itemIn, idx) in item.options"
                   :key="'multiSelect' + idx"
                   :label="itemIn.name"
                   :value="itemIn.value">
        </el-option>
      </el-select>
      <template v-if="item.type == 'radio'">
        <el-radio-group v-model="item.value"
                        @change="handleChange($event, item)">
          <el-radio v-for="(itemIn, idx) in item.options"
                    :key="'radio' + idx"
                    :label="itemIn.value">{{ itemIn.name }}</el-radio>
        </el-radio-group>
      </template>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'formItems',
  props: {
    list: Array,
  },
  methods: {
    handleChange(e, item) {
      item.change && item.change(e)
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>
